<template>
    <form-item
        :designer="designer" 
        :field="field" 
        :rules="state.rules"
    >
        <el-date-picker
            :type="type"
            v-model="formModel[field.options.name]"
            :size="size"
            :disabled="disabled"
            :clearable="clearable"
            :readonly="readonly"
            :placeholder="placeholder"
            :class="{
                'auto-width':autoWidth
            }"
            :format="format"
            :value-format="valFormat"
        />
    </form-item>
</template>

<script setup>
import {nextTick, onMounted, reactive,computed} from 'vue';
import FormItem from './form-item.vue';
import {useRules} from '@/hooks/useRules.js'

defineOptions({
    name:"xy-date"
})
const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    field:{
        type:Object,
        default:()=>({})
    },
    formModel:{
        type:Object,
        default:()=>({})
    }
})

const state = reactive(({
    fieldVal:[],
    rules:[]
}))

useRules(state,props.field)

const type = computed(()=>props.field.options.type)

const disabled = computed(()=>{
    return props.field.options.disabled
})

const size = computed(()=>{
    return props.field.options.size || 'default'
})

const clearable = computed(()=>{
    return props.field.options.clearable
})

const readonly = computed(()=>{
    return props.field.options.readonly
})

const placeholder = computed(()=>{
    return props.field.options.placeholder
})
const autoWidth = computed(()=>{
    return props.field.options.autoFullWidth
})

const format = computed(()=> {
    // if(props.field.options.type === 'week'){
    //     return "[周] ww"
    // }
    // if(props.field.options.type === 'year'){
    //     return "YYYY年"
    // }
    // if(props.field.options.type === 'years'){
    //     return "YYYY年"
    // }
    // if(props.field.options.type === 'month'){
    //     return "MM月"
    // }
    // if(props.field.options.type === 'months'){
    //     return "MM月"
    // }
    return props.field.options.format
})
const valFormat = computed(()=>{
    // if(props.field.options.type === 'week'){
    //     return "[周] ww"
    // }
    // if(props.field.options.type === 'year'){
    //     return "YYYY年"
    // }
    // if(props.field.options.type === 'years'){
    //     return "YYYY年"
    // }
    // if(props.field.options.type === 'month'){
    //     return "MM月"
    // }
    // if(props.field.options.type === 'months'){
    //     return "MM月"
    // }
    return props.field.options.valueFormat
})

const setFieldVal = val=>{
    props.formModel[props.field.options.name] = val
}

onMounted(()=>{
    if(props.field && props.field.options.defaultValue){
        // 存在默认值的情况下进行初始化
        setFieldVal(props.field.options.defaultValue)
    }

    nextTick(()=>{
        if(!props.designer) return
        props.designer.createFieldValFun(props.field.id, setFieldVal)
    })
})
</script>

<style lang="scss" scoped>
:deep(.el-form-item){
    .auto-width{
        width: 100%;
    }
}
</style>
